$(function() {
    var swiper = "";

    // 初始化流程图
    var step2 = new SetStep({
        content: '.stepCont2',
        clickAble: false,
        descriptionHeader: ['填写信息', '选择画面'],
        steps: ['1', '2'],
        stepContainerMar:200,
        imgWidth:-320, // 调整居中位置
        stepCounts: 2, // 一共有多少步骤
        curStep: 1,// 一开始显示第几步
    });

    // 点击退出按钮，退出页面，返回某个页面
    $(".stepCont2").on("click","#exitBtn",function () {
        history.back(-1);
    })



    /* 对步骤一进行全局初始化开始 */


    // 限制课堂标题的字数小于12
    $(".titleInput").change(function(){
        $(this).next(".t_h").children("i").html($(this).val().length)
    })
    $(".titleInput").keydown(function(){
        $(this).next(".t_h").children("i").html($(this).val().length)
    })
    $(".titleInput").keyup(function(){
        $(this).next(".t_h").children("i").html($(this).val().length)
    })


    // 限制课堂详情的字数小于200
    $(".intruTextarea").change(function(){
        $(this).next(".t_h").children("i").html($(this).val().length)
    })
    $(".intruTextarea").keydown(function(){
        $(this).next(".t_h").children("i").html($(this).val().length)
    })
    $(".intruTextarea").keyup(function(){
        $(this).next(".t_h").children("i").html($(this).val().length)
    })

    // 初始化日期、时间插件

    // 年月日单个,消息公告的日期筛选

	
	// 20190522新增：时间控件切换，只可选当天以后的日期
	var todayDate = sh.dateFormat("yyyy-MM-dd",new Date());
	
	$('#chooseDate').fdatepicker({
		format: 'yyyy-mm-dd',
		// pickTime: true
		pickTime: false,
		startDate:todayDate,
	}).on("hide",function(ev){
	    // pickDateCallBack(noteData,new Date($("#chooseDate").val()).getTime());
		// $("#chooseDate").val($("#chooseDate").val()+" "+sh.getWeek(new Date($("#chooseDate").val()).getDay()));
	});
    // 初始化时间选择控件
    $("#timePicker").hunterTimePicker();

    /* 对步骤一进行全局初始化结束 */


    // 点击上一步、下一步，判断目前的步骤数，对2.3.4步的步骤做初始化
    $(".stepCont2").on("click","#nextBtn,#prevBtn",function () {

        getStepNum().then(function(nowStepNum){  // nowStepNum是当前步骤数
            if(nowStepNum == 1 ){                       // 步骤一

                // 步骤一的其他初始化需放到全局里，不能放到此处，此处有延迟（等待页面全部加载才能判断步骤数）
                $("#endBtn").remove();
                $("#nextBtn").show();
                $("#nextBtn").html("下一步");

            }
            else if(nowStepNum == 2){
                // 步骤二
                // 左侧主播模式菜单手势滑动初始化
                swiperInit('#broadcastMode');

                // 下一步按钮隐藏，完成创建按钮显示
                var endBtnHtml = '<button type="button" class="btn btn-default nextBtn" id="endBtn">完成创建</button>';
                $("#nextBtn").after(endBtnHtml);
                $("#nextBtn").hide();
                $(".stepCont2").on("click","#endBtn",function () {
                    window.location = "myRecord.html"; // ****请后台改为对应的php文件地址
                })

                // 初始化右侧画面显示内容，一开始显示第一条数据，从后台获取id=0的数据
                initMovie($(".mode-item").eq(0),0);

                //点击左侧菜单模式切换，切换时右侧内容随之切换成当前模式下选中菜单的内容
                $(".selectMenuBtn").on("click","ul li",function () {

                    $(this).addClass("active").siblings("li").removeClass("active");
                    $(this).children("a").addClass("active");
                    $(this).siblings("li").children("a").removeClass("active");
                    var index = $(this).attr("index");
                    $(".selectModeList").hide();
                    $(".selectModeList").eq(index).show();

                    // 切换模式后，右侧根据被选中的菜单重绘标题和内容
                    $(".mode-item").each(function(){

                        if($(this).attr("isSelected")==1 && $(this).parent().parent().css("display") == "block" ){
                            // 切换右侧标题和内容，将当前模式的索引值index发送到后台获取对应的直播内容
                            initMovie($(this),$(this).attr("index"));
                            return;
                        }
                    })
                    if(index == 1){
                        swiperInit('#teachMode')
                    }else{
                        swiperInit('#broadcastMode')
                    }

                })

                // 点击左侧某个菜单，右侧内容切换
                $(".selectModeList").on("click",".mode-item",changeModeCallBack)

                // 切换背景下拉菜单
                sh.toggleMenu({
                    targetTitleEle:"#changeBac", //select content
                    submenuEle:".active-item-sub-menu", //options 容器
                    toggleClassName:"actived", // 一级菜单切换小三角的样式名
                    subMenuChildEle:".active-item-sub-menu span", // options子元素
                })

            }
            else{
                // 步骤三
                return;
            }
        });
    })



});

//判断当前的流程所在的步骤
function getStepNum(){
    return new Promise(function (resolve,reject) {
        var liLen = $(".ystep-container-steps li").length;
        var nowStep = 0;
        setTimeout(function () {
            for(var i=0;i<liLen;i++){
                if($(".ystep-container-steps li").eq(i).hasClass("ystep-step-active")){
                    nowStep =i+1;
                    break;
                }
            }
            resolve(nowStep);
        },500);
    })
}


/* 步骤二所需方法开始 */

var selectedSpaceIndex = [];// selectedSpaceIndex为已选教室的保存记录，保存已选空间的id.初始化为空
var selectedUserIndex = []; //selectedSpaceIndex为已选用户的保存记录，保存已选用户的id.初始化为空
var currentPage =1;// 初始化当前页码，全选时使用记录当前页被全选过，返回当前页时，当前页数据全部选中

// 翻页回调，对数据进行个性化渲染，targetUl是装载数据的容器，startIndex是第一条数据的id，endIndex是最后一条数据的id，data是获取到的数据,defaultImgUrl是默认图片
function getDataAndSortCallback(targetUl,startIndex,endIndex,data,defaultImgUrl){
    // 后台可在此通过发送startIndex、endIndex两个参数获取当前页的数据，用于服务端分页,客户端分页可忽略
    // ...
    var indexRange = endIndex-startIndex; // 需总共请求的数据条数
    var contentHtml = "";
    var pageIndex = startIndex/30+1;
    currentPage = pageIndex;
    // console.log(selectedSpaceIndex);
    // console.log(startIndex);
    var dataHtml; // 可选列表显示的内容：教室名称或用户名称
    for (var j = startIndex; j < endIndex; j++){ // 服务器端分页改为for(var j=0; j < indexRange; j++)
        dataHtml = data[j].spaceName ? data[j].spaceName : data[j].userName;
        contentHtml = ' <li index='+data[j].id+'><a href="javascript:void(0)">'+dataHtml+'</a></li>';
        if(selectedSpaceIndex.length>0){
            selectedSpaceIndex.forEach(function(val){
                if(val==data[j].id){
                    // 被选中的空间名称加上active样式
                    contentHtml='<li index="'+data[j].id+'"><a href="javascript:void(0)" class="active">'+dataHtml+'</a></li>'
                }
            })
        }
        targetUl.append(contentHtml);
    }
}

function initModeWindow(data,targetUl){

    $(".fullbg").show();
    $(".chooseClass").show();

    $(".space-selected-content").empty();

    // 可选空间列表初始化
    sh.createList(data,30,targetUl,"");
}

// 多条件筛选
function anyOptionSelectCallBack(targetData,selectedTags,targetUl){ // targetData是 需要筛选的目标数据，selectedTags是当前所有选中的筛选条件，targetUl是 显示所有结果的父级元素
    var selectList = targetData; //在selectList副本上筛选教室
    selectedTags.forEach(function(selectedTagItem){
        selectList = (selectList.filter(function(item){
            return item.grade == selectedTagItem || item.addtress == selectedTagItem
        }))
    })
    if(selectList.length>0){
        sh.createList(selectList,30,targetUl,"")
    }else{
        $(targetUl).html("没有匹配的结果")
    }
}

/* 步骤二所需方法结束 */



/* 步骤四所需方法开始 */

// 初始化右侧内容区 标题以及内容，多次调用可重绘
function initMovie(el,index){// el为当前被选中的元素，index为元素的索引值，后台可用于获取对应数据
    var newTitle = el.children("a").children(".movieModeInfo").html();
    $(".rightMovieWrap .titleMsg").html(newTitle);

    // ...后台将index作为参数发送ajax到后台获取该条数据，渲染右侧内容,可将ajax方法封装在此，即可实现点击、切换、初始化自动渲染右侧内容
    // 模拟数据
    var data = [
        {
            id:0,
            title:"教学课程1",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:1,
            title:"教学课程2",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:2,
            title:"教学课程3",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:3,
            title:"教学课程4",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:4,
            title:"教学课程5",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:5,
            title:"教学课程6",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:6,
            title:"教学课程7",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:7,
            title:"教学课程8",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:8,
            title:"教学课程9",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:9,
            title:"教学课程10",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:10,
            title:"教学课程11",
            imgUrl:"images/bac/ex_img2.png",
        },
        {
            id:11,
            title:"教学课程12",
            imgUrl:"images/bac/ex_img2.png",
        },
    ]
    // console.log(index);
    var imgHtml =   '<img src="'+data[index].imgUrl +'" alt="">';
    $(".rightMovieContent").html(imgHtml);

}

// 左侧滑动菜单初始化
function swiperInit(el){
    swiper = new Swiper(el, {
        slidesPerView: 4,
        slidesPerColumn:2,
        direction: 'vertical',//3版本垂直滑动
        mode: 'vertical' , //2版本垂直滑动,兼容ie9
        // resistanceRatio : 0 // 禁用弹性
        // pagination: {
        //     el: '.swiper-pagination',
        //     clickable: true,
        // },
    });
}

// 右侧切换背景下拉菜单回调方法
function changeStatusCallback(el){
    // bacId是当前选择的背景的索引值，
    // ...后台将bacId作为参数通过ajax发送到后台获取对应的背景数据。
    var bacId = el.attr("status");


}

// 左侧模式选择菜单回调方法
function changeModeCallBack() {
    $(this).addClass("active").siblings(".mode-item").removeClass("active");
    // $(this).append("<div class='inner-border'></div>").siblings(".mode-item").children(".inner-border").remove();
    $(this).attr("isSelected",1).siblings(".mode-item").attr("isSelected",0);

    initMovie($(this),$(this).index())
}

/* 步骤四所需方法结束 */

